<template>
    <div class="container">
      <div style="height: 10px"></div>
      <!-- <div class="head">
        <div style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 90%;
            margin-left: 5%;
          ">
          <div style="width: 40%; text-align: center">
            <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange">
              <input placeholder="点击选择开始时间" v-model="date" disabled type="text" />
            </picker>
          </div>
          <div style="width: 20%; text-align: center">至</div>
          <div style="width: 40%; text-align: center">
            <picker mode="date" :value="dates" :start="startDates" :end="endDates" fields="day" @change="bindDateChanges">
              <input placeholder="点击选择结束时间" disabled v-model="dates" type="text" />
            </picker>
          </div>
        </div>
      </div> -->
      <!-- <div style="height: 40px"></div> -->
      <!-- <div style="height: 20px;"></div>
      <div style="width: 95%;margin-left: 2.5%;background: #ffffff;border-radius: 10px;">
        <div style="height: 20px;"></div>
        <div style="color: #000000;width: 90%;margin-left: 5%;display: flex;align-items: center;justify-content: space-between;">
            <div>新增工单任务</div>
            <div class="addBtn">新增</div>
        </div>
        <div style="height: 20px;"></div>
      </div> -->
      <!-- <div style="height: 10px;"></div> -->
      <!-- 内容切换 -->
      <div v-if="list.length == 0">
        <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
        </u-empty>
      </div>
      <div class="card" v-for="item in list" @click="taskDetail(item)">
        <div style="height: 10px"></div>
        <div class="card-top">
          <div style=" text-align: center;font-size: 18px;font-weight: 500;">{{ item.repairMaintainNo ?? item.inspectNo ?? item.safetyTrainNo }}</div>
          <div v-show="indent == '维保'"  style="width: 20%; text-align: center;border-radius: 4px;">
            <image style="width: 110rpx;height: 60rpx;" :src="item.repairMaintainOrderState === 0?'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202370.png':'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202371.png'" />
          </div>
        </div>
        <div style="height: 10px"></div>
        <u-line color="#83AF92"></u-line>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>发单日期</div>
          <div>{{ item.launchTime??item.createTime }}</div>
        </div>
        <div style="height: 15px;"></div>
        <div class="newFlex" v-show="indent != '知识库'">
          <div>接单人员</div>
          <div>{{ item.userName ?? item.orderPersonName }}</div>
        </div>
        <div style="height: 15px;"></div>
        <div class="newFlex" v-show="indent != '知识库'">
          <div>手机号码</div>
          <div>{{ item.phonenumber ?? item.phoneNumber }}</div>
        </div>
        <div style="height: 15px;" v-show="indent == '维保'"></div>
        <div class="newFlex" v-show="indent == '维保'">
          <div>设备编号</div>
          <div>{{ item.repairMaintainNo }}</div>
        </div>
        <div style="height: 15px;" v-show="indent == '巡检'"></div>
        <div class="newFlex" v-show="indent == '巡检'">
          <div>巡检对象</div>
          <div>{{ item.inspectName }}</div>
        </div>
        <div class="items" v-show="indent == '知识库'">
          <div>试卷：{{ item.paperName }}</div>
          <div>合格分数：{{ item.scoreLine }}</div>
        </div>
        <div class="items" v-show="indent == '知识库'">
          <div style="font-size: 14px;">限时：{{ item.startTime }}-{{ item.endTime }}</div>
        </div>
        <!-- <div style="height: 10px"></div> -->
        <!-- <div v-show="indent == '维保'" :class="item.repairMaintainState == 0 ? 'status' : 'status1'">
          {{ item.repairMaintainState == 0 ? "待接单" :
            item.repairMaintainState == 1 ? '进行中' : item.repairMaintainState == 2 ? '已完成' : '无' }}
        </div> -->
        <div v-show="indent == '巡检'" :class="item.workOrderState == 2 ? 'status' : 'status1'">
          <!-- {{ item.workOrderState == 2 ? "进行中" : item.workOrderState==3?'已完成':'' }} -->
          {{ item.workOrderState == 1 ? "待接单" : item.workOrderState == 2 ? '进行中' : item.workOrderState == 3 ? '已完成' : "" }}
        </div>
        <div v-show="indent == '知识库'" class="status">
          完成进度：{{ item.completedPersonNum }} / {{ item.predictPersonNum }}
        </div>
        <div style="height: 15px"></div>
      </div>
      <!-- <div style="height: 30rpx;"></div> -->
      <!-- <div v-if="remark == '处理厂任务发布员'" class="btnRound" @click="addQuest">
        <div></div>
        <div class="btn">
          <div v-show="indent == '维保'">派发任务</div>
          <div v-show="indent == '巡检'">派发巡检</div>
          <div v-show="indent == '知识库'">开始考试</div>
        </div>
      </div> -->
      <div style="height: 3vh;"></div>
    </div>
  </template>
  <script>
  import { mainList, insList, knowList } from '../api/api.js';
  export default {
    data() {
      return {
        date: '',
        dates: '',
        indent: '',
        startTime: '',
        endTime: '',
        list: [],
        remark: ''
      };
    },
    methods: {
      bindDateChange: function (e) {
        //选择日期
        this.date = e.detail.value;
        console.log("date", this.date);
  
        if (this.indent == '维保') {
          this.wList();
        } else if (this.indent == '巡检') {
          this.xList();
        } else if (this.indent == '知识库') {
          this.zList();
        }
      },
      bindDateChanges: function (e) {
        //选择日期
        this.dates = e.detail.value;
        console.log("date", this.date);
        if (this.indent == '维保') {
          this.wList();
        } else if (this.indent == '巡检') {
          this.xList();
        } else if (this.indent == '知识库') {
          console.log(12234);
          this.zList();
        }
      },
      getDate(type) {
        //年月日
        const date = new Date();
        // const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
  
        if (type === "start") {
          year = year - 60;
        } else if (type === "end") {
          year = year + 2;
        }
        month = month > 9 ? month : "0" + month;
        day = day > 9 ? day : "0" + day;
        return `${year}-${month}-${day}`;
      },
      taskDetail(item) {
        // uni.setStorageSync('mainDetail', item)
        // uni.navigateTo({ url: '/pagesPlant/index/maindetail' })
      },
      addQuest() {
        let id = 2;
        uni.navigateTo({ url: `/pagesPlant/index/addmain?id=2` })
      },
      wList() {
        mainList({
          repairMaintainState: 0,
          beginTime: this.date,
          endTime: this.dates,
          type: 1
        }).then(res => {
          if (res.data.code == 200) {
            console.log(res.data.rows, 'res');
            // 使用 map 方法进行数据转换
            this.list = res.data.rows.map(item => ({
              id: item.repairMaintainTask.id,
              phoneNumber: item.phonenumber,
              userName: item.repairMaintainTask.userName,
              launchTime: item.repairMaintainTask.launchTime,
              repairMaintainNo: item.repairMaintainTask.repairMaintainNo,
              repairMaintainOrderState: item.repairMaintainTask.repairMaintainOrderState,
              repairMaintainState: item.repairMaintainTask.repairMaintainState,
              repairMaintainType: item.repairMaintainTask.repairMaintainType,
              deptName: item.repairMaintainTask.deptName,
              deptId: item.repairMaintainTask.deptId,
              deviceNo: item.repairMaintainTask.deviceNo,
              taskDesc: item.repairMaintainTask.taskDesc,
              deviceSate: item.repairMaintainTask.deviceSate,
              // faultType:item.repairMaintainTask.faultType,
              faultType: item.repairMaintainTask.faultType,
              emerDegree: item.repairMaintainTask.emerDegree,
              deviceName: item.repairMaintainTask.deviceName,
            }));
            console.log(this.list, 'list');
          }
        })
      },
      xList() {
        insList({
          workOrderState: '1',
          beginTime: this.date,
          endTime: this.dates,
          type: 1
        }).then(res => {
          console.log(res.data, '巡检工单');
          this.list = res.data.data;
        })
      },
      zList() {
        console.log(this.date, this.dates, '666');
        knowList({
          beginTime: this.date,
          endTime: this.dates,
          // beginTime: '',
          // endTime: '',
        }).then(res => {
          console.log(res.data, '知识库');
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        })
      }
    },
    onLoad() { },
    onShow() {
      this.indent = uni.getStorageSync('pageIndent');
      this.remark = uni.getStorageSync('userInfo').remark;
      let taskFlag = uni.getStorageSync('taskFlag');
      if (this.indent == '巡检') {
        uni.setNavigationBarTitle({
          title: '巡检列表'
        });
        this.xList();
      } else if (this.indent == '维保') {
        uni.setNavigationBarTitle({
          title: '维保待接单任务'
        });
        this.wList();
      } else if (this.indent == '知识库') {
        uni.setNavigationBarTitle({
          title: '安全培训'
        });
        this.zList();
      }
    }
  };
  </script>
  <style lang="scss">
  .container {
    height: 100vh;
    width: 100vw;
    background: #f3f3f3;
    color: #000000;
    overflow-y: scroll;
  }
  .newFlex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
  .card {
    width: 95%;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 10px;
    background: #ffffff;
  
    .card-top {
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 90%;
      margin-left: 5%;
    }
  }
  
  .items {
    display: flex;
    align-items: center;
    width: 90%;
    margin-left: 5%;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 20rpx
  }
  
  .table {
    width: 90%;
    margin-left: 5%;
  }
  
  .status {
    color: #fff;
    background: #000000;
    width: 90%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    border-radius: 3px;
  }
  
  .status1 {
    color: #000000;
    background: gray;
    width: 90%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    border-radius: 3px;
  }
  
  .right {
    background: #FDBD18;
    color: #fff;
  
  }
  
  .right1 {
    background: #50AB18;
    color: #fff;
  }
  
  .head {
    display: flex;
    align-items: center;
    height: 50px;
    background: #000000;
    color: #fff;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 9999;
  }
  
  .btn {
    display: flex;
    align-items: center;
    background: #1B9C46;
    color: #fff;
    border-radius: 7px;
    height: 75rpx;
    justify-content: center;
    position: absolute;
    width: 100px;
    z-index: 9999;
    bottom: 10%;
    right: 10px;
    font-size: 17px;
  }
  
  .btnRound {
    width: 90%;
    margin-left: 5%;
    display: flex;
    justify-content: space-between;
  }
  .addBtn{
    width: 120rpx;
    height: 65rpx;
    background-color: #000000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
  }
  </style>